<!DOCTYPE>
<html>
<head>
    <meta charset="utf-8">
    <title>IFE JavaScript Task 01</title>
</head>
<body>

<ul id="source">
    <li>北京空气质量：<b>90</b></li>
    <li>上海空气质量：<b>70</b></li>
    <li>天津空气质量：<b>80</b></li>
    <li>广州空气质量：<b>50</b></li>
    <li>深圳空气质量：<b>40</b></li>
    <li>福州空气质量：<b>32</b></li>
    <li>成都空气质量：<b>90</b></li>
</ul>

<ul id="resort">
    <!--
    <li>第一名：北京空气质量：<b>90</b></li>
    <li>第二名：北京空气质量：<b>90</b></li>
    <li>第三名：北京空气质量：<b>90</b></li>
     -->

</ul>

<button id="sort-btn">排序</button>

<script type="text/javascript">
    /**
     * addEventHandler方法
     * 跨浏览器实现事件绑定
     */
    function addEventHandler(ele, event, hanlder) {
        if (ele.addEventListener) {
            ele.addEventListener(event, hanlder, false);
        } else if (ele.attachEvent) {
            ele.attachEvent("on"+event, hanlder);
        } else  {
            ele["on" + event] = hanlder;
        }
    }
    /**
     * rank方法
     * 根据输入的阿拉伯数字, 将其转化成中文数字
     * 返回一个字符串
     */
    function rank(index) {
        var units = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'],
                high = ['', '十', '百', '千', '万'],
                number = index.toString(),
                len = number.length,
                arr = [];
        for (var i = 0; i < len; i++) {
            if (number[i] == '0' && i == len -1) {
                return arr.join("");
            }
            if (number[i] == '0' && number[i+1] != '0') {
                arr.push(units[number[i]]);
            }
            if (number[i] != '0' ) {
                if (i == len-2 && number[i] == 1) {
                    arr.push(high[len - i - 1]);
                } else {
                    arr.push(units[number[i]] + high[len - i - 1]);
                }
            }
        }
        return arr.join("");
    }
    /**
     * getData方法
     * 读取id为source的列表，获取其中城市名字及城市对应的空气质量
     * 返回一个数组，格式见函数中示例
     */
    function getData() {
        /*
         coding here
         */

        /*
         data = [
         ["北京", 90],
         ["北京", 90]
         ……
         ]
         */
        var list = document.getElementById("source"),
            listItem = list.getElementsByTagName("li"),
            data = [];

        for (var i = 0; i < listItem.length; i++) {
            var innerHTML = listItem[i].innerHTML;
            var tempArr = new Array(2);
            tempArr[0] = innerHTML.slice(0, 2);
            tempArr[1] = innerHTML.match(/\d+/);
            console.log(tempArr[1]);
            data.push(tempArr);
        }

        return data;

    }

    /**
     * sortAqiData
     * 按空气质量对data进行从小到大的排序
     * 返回一个排序后的数组
     */
    function sortAqiData(data) {
        return data.sort(function(value1, value2){
            return value1[1] - value2[1];
        })
    }

    /**
     * render
     * 将排好序的城市及空气质量指数，输出显示到id位resort的列表中
     * 格式见ul中的注释的部分
     */
    function render(data) {
        var innerText = "",
            insertList = document.getElementById("resort");
        data.forEach(function(item, index){
            innerText += "<li>第" + rank(index+1) + "名: " + item[0] + "空气质量: <b>" + item[1] + "</b></li>";
        });
        insertList.innerHTML = innerText;
    }

    function btnHandle() {
        var aqiData = getData();
        aqiData = sortAqiData(aqiData);
        render(aqiData);
    }


    function init() {

        // 在这下面给sort-btn绑定一个点击事件，点击时触发btnHandle函数
        var btn = document.getElementById("sort-btn");
        addEventHandler(btn, 'click', btnHandle);

    }

    init();

</script>
</body>
</html>